jQuery is a popular JavaScript for creating dynamic web pages.
In this article, we’ll look at how to using jQuery in our web apps.
jQuery.Callbacks()
The jQuery.Callbacks() method lets us create a callback list to manage callbacks.
For example, we can write:
const fn1 = (val) => console.log('fn1', val);
const fn2 = (val) => console.log('fn2', val);
const callbacks = $.Callbacks();
callbacks.add(fn1);
callbacks.fire("foo!");
callbacks.add(fn2);
callbacks.fire("bar!");
We call $.Callbacks() to returns the callbacks list object.
Then we call add to add the callback functions.
And we call fire to call the callbacks with the given argument.
So, we’ll get:
fn1 foo!
fn1 bar!
fn2 bar!
logged in the console.
jQuery.contains()
The jQuery.contains() method lets us check to see if a DOM element is a descendant of another DOM element.
For example, we can write:
console.log($.contains(document.documentElement, document.body));
to check if the body element is in the document element.
This should return true since body is in document.
jQuery.cssHooks
The jQuery.cssHooks lets us hook directly into jQuery to override how CSS properties are retrieved or set.
We can also change how CSS properties are normalized, property naming, or create custom properties.
For example, if we have:
<div id='element'>
foo
</div>
<div id='another'>
bar
</div>
Then we can specify how the border-radius CSS property is get and set by writing:
const borderRadius = "borderRadius";
$.cssHooks.borderRadius = {
get(elem, computed, extra) {
return $.css(elem, borderRadius);
},
set(elem, value) {
elem.style[borderRadius] = value;
}
};
$("#element").css("borderRadius", "10px");
$("#another").css("border-radius", "20px");
jQuery.cssNumber
The jQuery.cssNumber object has all the CSS properties that may be used without a unit.
For example, we can set the borderRadius CSS property to be used without a unit by writing:
jQuery.cssNumber.borderRadius = true;
The default object has the following properties set to true :
zIndexfontWeightopacityzoomlineHeightwidowsorphansfillOpacitycolumnCountorderflexGrowflexShrink
jQuery.data()
We can save arbitrary data associated with the specified element and returned what value was set with the jQuery.data() method.
For example, if we have:
<div>
The values stored were
<span></span>
and
<span></span>
</div>
Then we can save data into the div and get it by writing:
const div = $("div")[0];
jQuery.data(div, "test", {
first: 16,
last: "pizza!"
});
$("span").first().text(jQuery.data(div, "test").first);
$("span").last().text(jQuery.data(div, "test").last);
We call jQuery.data with the div to save the data.
The first argument is the element to save the data.
The 2nd argument is the key to get the data.
And the last argument is the object we’re saving.
Then we get the data in the last 2 lines and set them as the text content of the span.
jQuery.Deferred()
The jQuery.Deferred() method is a factory function that returns a chainable utility object with methods to register callbacks, invoke callbacks, and relay success or failure states of any sync or async operation.
jQuery.dequeue()
The jQuery.dequeue() method lets us run the next function on the queue for the matched element.
For example, if we have the following HTML:
<button>Start</button>
<div></div>
and the following CSS:
div {
margin: 3px;
width: 50px;
position: absolute;
height: 50px;
left: 10px;
top: 30px;
background-color: yellow;
}
div.red {
background-color: red;
}
Then when we click on the Start button, we animate the div by writing
$("button").click(function() {
$("div")
.animate({
left: '+=200px'
}, 2000)
.animate({
top: '0px'
}, 600)
.queue(function() {
$(this).toggleClass("red");
$.dequeue(this);
})
.animate({
left: '10px',
top: '30px'
}, 700);
});
We call $.dequeue to call invoke the animation in the animate method.
Conclusion
We can add and run callbacks, change how CSS properties, and more with jQuery.
